import { createTheme, alpha } from '@mui/material';

const getTheme = (darkMode, isXs = false) => {
  // Main colors with green primary
  const primaryColor = '#40d47e';   // Fresh Green - primary color
  const secondaryColor = '#4b9e6f'; // Darker Green - secondary/backup
  const warningColor = '#c4880b';   // Orange/Amber - warnings, attention
  const successColor = '#29b02a';   // Green - success states, confirmations
  
  // Real estate specific colors
  const propertyTagColor = '#6354a3'; // Purple for premium properties
  const featuredPropertyColor = '#e6c34c'; // Gold for featured listings
  
  // Common component styling patterns with subtle real estate touches
  const commonStyle = {
    borderRadius: '12px',
    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
    transition: 'all 0.3s ease',
  };
  
  const elevatedStyle = {
    transform: 'translateY(-3px)',
    boxShadow: '0 6px 12px rgba(0, 0, 0, 0.15)'
  };
  
  // Dark mode specific styles
  const darkModeStyles = {
    background: {
      default: '#1d2033',
      paper: '#252942',
    },
    text: {
      primary: '#ffffff',
      secondary: '#a0aec0',
    }
  };
  
  // Light mode specific styles
  const lightModeStyles = {
    background: {
      default: '#f7f9fc', // Slightly blue-tinted white for clean feel
      paper: '#ffffff',
    },
    text: {
      primary: '#2d3748', // Slightly softer than pure black
      secondary: '#718096',
    }
  };
  
  return createTheme({
    palette: {
      mode: darkMode ? 'dark' : 'light',
      primary: {
        main: primaryColor,
        light: alpha(primaryColor, 0.8),
        dark: '#339d63', // Darker shade of primary
      },
      secondary: {
        main: secondaryColor,
      },
      success: {
        main: successColor,
      },
      warning: {
        main: warningColor,
      },
      text: {
        ...(darkMode ? darkModeStyles.text : lightModeStyles.text)
      },
      background: {
        ...(darkMode ? darkModeStyles.background : lightModeStyles.background)
      },
      // Custom colors for real estate
      propertyTag: {
        main: propertyTagColor,
      },
      featured: {
        main: featuredPropertyColor,
      },
    },
    typography: {
      allVariants: {
        fontFamily: '"Roboto", "Open Sans", sans-serif',
        letterSpacing: '-0.01em',
      },
      h1: {
        fontWeight: 600,
      },
      h2: {
        fontWeight: 600,
      },
      h3: {
        fontWeight: 500,
      },
      h4: {
        fontWeight: 500,
      },
      h5: {
        fontWeight: 500,
      },
      h6: {
        fontWeight: 500,
      },
      button: {
        fontWeight: 600,
        textTransform: 'none',
      },
      subtitle1: {
        letterSpacing: 0,
      },
    },
    shape: {
      borderRadius: 12,
    },
    spacing: (factor) => `${0.8 * factor}rem`,
    components: {
      // == FORM COMPONENTS ==
      
      // Button Component
      MuiButton: {
        styleOverrides: {
          root: {
            ...commonStyle,
            padding: '10px 20px',
            fontWeight: 600,
            fontSize: '0.95rem',
            '&:hover': {
              ...elevatedStyle,
            },
          },
          containedPrimary: {
            backgroundColor: primaryColor,
            color: '#ffffff',
            '&:hover': {
              backgroundColor: '#339d63', // Darker shade on hover
            },
          },
          containedSecondary: {
            backgroundColor: secondaryColor, 
            color: '#ffffff',
            '&:hover': {
              backgroundColor: '#3a7d5a', // Darker green on hover
            },
          },
          containedSuccess: {
            backgroundColor: successColor,
            color: '#ffffff',
            '&:hover': {
              backgroundColor: '#228d23', // Darker green on hover
            },
          },
          outlined: {
            borderWidth: '2px',
            '&:hover': {
              borderWidth: '2px',
            },
          },
          outlinedPrimary: {
            borderColor: primaryColor,
            '&:hover': {
              backgroundColor: alpha(primaryColor, 0.08),
            },
          },
        },
      },
      
      // TextField Component
      MuiTextField: {
        styleOverrides: {
          root: {
            '& .MuiOutlinedInput-root': {
              ...commonStyle,
              boxShadow: '0 2px 6px rgba(0, 0, 0, 0.06)',
              overflow: 'hidden',
              transition: 'box-shadow 0.3s ease',
              '&:hover': {
                boxShadow: '0 3px 8px rgba(0, 0, 0, 0.1)',
              },
              '&.Mui-focused': {
                boxShadow: `0 4px 10px ${alpha(primaryColor, 0.25)}`,
                '& .MuiOutlinedInput-notchedOutline': {
                  borderColor: primaryColor,
                  borderWidth: 2,
                },
              },
            },
            '& .MuiInputLabel-root.Mui-focused': {
              color: primaryColor,
            },
          },
        },
      },
      
      // Select Component
      MuiSelect: {
        styleOverrides: {
          root: {
            ...commonStyle,
            '&.MuiOutlinedInput-root': {
              overflow: 'hidden',
              boxShadow: '0 2px 6px rgba(0, 0, 0, 0.06)',
              '&:hover': {
                boxShadow: '0 3px 8px rgba(0, 0, 0, 0.1)',
              },
            },
            '&.Mui-focused': {
              boxShadow: `0 4px 10px ${alpha(primaryColor, 0.25)}`,
              '& .MuiOutlinedInput-notchedOutline': {
                borderColor: primaryColor,
                borderWidth: 2,
              },
            },
          },
        },
      },
      
      // MenuItem Component
      MuiMenuItem: {
        styleOverrides: {
          root: {
            padding: '10px 16px',
            '&.Mui-selected': {
              backgroundColor: alpha(primaryColor, 0.1),
              '&:hover': {
                backgroundColor: alpha(primaryColor, 0.15),
              },
            },
            '&:hover': {
              backgroundColor: alpha(primaryColor, 0.05),
            },
          },
        },
      },
      
      // FormControl Component
      MuiFormControl: {
        styleOverrides: {
          root: {
            marginBottom: '18px',
          },
        },
      },
      
      // FormLabel Component
      MuiFormLabel: {
        styleOverrides: {
          root: {
            marginBottom: '8px',
            fontWeight: 500,
            '&.Mui-focused': {
              color: primaryColor,
            },
          },
        },
      },
      
      // FormHelperText Component
      MuiFormHelperText: {
        styleOverrides: {
          root: {
            marginTop: '4px',
            fontSize: '0.75rem',
          },
          error: {
            color: warningColor,
          },
        },
      },
      
      // InputAdornment Component
      MuiInputAdornment: {
        styleOverrides: {
          root: {
            color: darkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      
      // IconButton Component
      MuiIconButton: {
        styleOverrides: {
          root: {
            padding: '10px',
            '&:hover': {
              backgroundColor: alpha(primaryColor, 0.1),
            },
          },
          colorPrimary: {
            color: primaryColor,
            '&:hover': {
              backgroundColor: alpha(primaryColor, 0.1),
            },
          },
          colorSecondary: {
            color: secondaryColor,
            '&:hover': {
              backgroundColor: alpha(secondaryColor, 0.1),
            },
          },
          colorSuccess: {
            color: successColor,
            '&:hover': {
              backgroundColor: alpha(successColor, 0.1),
            },
          },
        },
      },
      
      // Dialog Components
      MuiDialog: {
        styleOverrides: {
          paper: {
            borderRadius: '16px',
            boxShadow: '0 10px 40px rgba(0, 0, 0, 0.15)',
            overflow: 'hidden',
            ...(darkMode && {
              backgroundColor: darkModeStyles.background.paper,
            }),
          },
        },
      },
      
      MuiDialogTitle: {
        styleOverrides: {
          root: {
            fontSize: '1.5rem',
            fontWeight: 600,
            padding: '20px 24px',
            borderBottom: `1px solid ${alpha(primaryColor, 0.1)}`,
            backgroundColor: alpha(primaryColor, 0.03),
            ...(darkMode && {
              color: darkModeStyles.text.primary,
            }),
          },
        },
      },
      
      MuiDialogContent: {
        styleOverrides: {
          root: {
            padding: '24px',
            ...(darkMode && {
              color: darkModeStyles.text.primary,
            }),
          },
        },
      },
      
      MuiDialogActions: {
        styleOverrides: {
          root: {
            padding: '16px 24px',
            borderTop: `1px solid ${alpha(primaryColor, 0.1)}`,
            backgroundColor: alpha(primaryColor, 0.03),
          },
        },
      },
      
      // Menu Component
      MuiMenu: {
        styleOverrides: {
          paper: {
            borderRadius: '12px',
            boxShadow: '0 6px 20px rgba(0, 0, 0, 0.12)',
            marginTop: '4px',
            ...(darkMode && {
              backgroundColor: darkModeStyles.background.paper,
            }),
          },
        },
      },
      
      // Chip Component
      MuiChip: {
        styleOverrides: {
          root: {
            borderRadius: '16px',
            padding: '0 8px',
            height: '32px',
            fontWeight: 500,
            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.08)',
            '&:hover': {
              boxShadow: '0 3px 6px rgba(0, 0, 0, 0.12)',
            },
          },
          colorPrimary: {
            backgroundColor: primaryColor,
            color: '#ffffff',
          },
          colorSecondary: {
            backgroundColor: secondaryColor,
            color: '#ffffff',
          },
          colorSuccess: {
            backgroundColor: successColor,
            color: '#ffffff',
          },
          // Custom chips for real estate features
          filled: {
            '&.MuiChip-filled.property-feature': {
              backgroundColor: alpha(primaryColor, 0.1),
              color: primaryColor,
              border: `1px solid ${alpha(primaryColor, 0.3)}`,
              ...(darkMode && {
                color: '#ffffff',
                backgroundColor: alpha(primaryColor, 0.2),
              }),
            },
            '&.MuiChip-filled.property-tag': {
              backgroundColor: alpha(propertyTagColor, 0.1),
              color: propertyTagColor,
              border: `1px solid ${alpha(propertyTagColor, 0.3)}`,
              ...(darkMode && {
                color: '#ffffff',
                backgroundColor: alpha(propertyTagColor, 0.2),
              }),
            },
            '&.MuiChip-filled.featured-property': {
              backgroundColor: alpha(featuredPropertyColor, 0.15),
              color: '#996c00',
              border: `1px solid ${alpha(featuredPropertyColor, 0.4)}`,
              fontWeight: 600,
              ...(darkMode && {
                color: '#ffffff',
                backgroundColor: alpha(featuredPropertyColor, 0.2),
              }),
            },
          },
        },
      },
      
      // == TABLE COMPONENTS ==
      
      MuiTable: {
        styleOverrides: {
          root: {
            borderCollapse: 'separate',
            borderSpacing: '0',
          },
        },
      },
      
      MuiTableContainer: {
        styleOverrides: {
          root: {
            ...commonStyle,
            marginBottom: '24px',
            overflow: 'hidden',
            ...(darkMode && {
              backgroundColor: darkModeStyles.background.paper,
            }),
          },
        },
      },
      
      MuiTableHead: {
        styleOverrides: {
          root: {
            backgroundColor: alpha(primaryColor, 0.08),
            ...(darkMode && {
              backgroundColor: alpha(primaryColor, 0.15),
            }),
          },
        },
      },
      
      MuiTableRow: {
        styleOverrides: {
          root: {
            transition: 'background-color 0.2s ease',
            '&:hover': {
              backgroundColor: alpha(primaryColor, 0.04),
              ...(darkMode && {
                backgroundColor: alpha(primaryColor, 0.1),
              }),
            },
            '&.Mui-selected': {
              backgroundColor: alpha(primaryColor, 0.08),
              '&:hover': {
                backgroundColor: alpha(primaryColor, 0.12),
              },
              ...(darkMode && {
                backgroundColor: alpha(primaryColor, 0.2),
                '&:hover': {
                  backgroundColor: alpha(primaryColor, 0.25),
                },
              }),
            },
            // Special row for featured properties
            '&.featured-property-row': {
              backgroundColor: alpha(featuredPropertyColor, 0.05),
              '&:hover': {
                backgroundColor: alpha(featuredPropertyColor, 0.1),
              },
              ...(darkMode && {
                backgroundColor: alpha(featuredPropertyColor, 0.1),
                '&:hover': {
                  backgroundColor: alpha(featuredPropertyColor, 0.15),
                },
              }),
            },
          },
          head: {
            backgroundColor: 'transparent',
            '&:hover': {
              backgroundColor: 'transparent',
            },
          },
        },
      },
      
      MuiTableCell: {
        styleOverrides: {
          root: {
            padding: '16px',
            borderBottom: `1px solid ${alpha(primaryColor, 0.08)}`,
            '&:first-of-type': {
              paddingLeft: '24px',
            },
            '&:last-of-type': {
              paddingRight: '24px',
            },
            ...(darkMode && {
              color: darkModeStyles.text.primary,
              borderBottom: `1px solid ${alpha(primaryColor, 0.15)}`,
            }),
          },
          head: {
            fontWeight: 600,
            color: darkMode ? '#ffffff' : '#2d3748',
            backgroundColor: alpha(primaryColor, 0.06),
            letterSpacing: '0.02em',
            fontSize: '0.85rem',
            textTransform: 'uppercase',
            ...(darkMode && {
              backgroundColor: alpha(primaryColor, 0.2),
            }),
          },
        },
      },
      
      // == LAYOUT COMPONENTS ==
      
      // Paper Component
      MuiPaper: {
        styleOverrides: {
          root: {
            ...commonStyle,
            padding: '20px',
            margin: '8px 0',
            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.06)',
            transition: 'box-shadow 0.3s ease, transform 0.3s ease',
            '&:hover': {
              boxShadow: '0 6px 20px rgba(0, 0, 0, 0.1)',
            },
            // Property card styling
            '&.property-card': {
              overflow: 'hidden',
              '&:hover': {
                transform: 'translateY(-4px)',
                boxShadow: '0 8px 24px rgba(0, 0, 0, 0.12)',
              },
            },
            ...(darkMode && {
              backgroundColor: darkModeStyles.background.paper,
              boxShadow: '0 4px 16px rgba(0, 0, 0, 0.15)',
              '&:hover': {
                boxShadow: '0 6px 20px rgba(0, 0, 0, 0.2)',
              },
            }),
          },
          elevation1: {
            boxShadow: '0 2px 12px rgba(0, 0, 0, 0.06)',
            ...(darkMode && {
              boxShadow: '0 2px 12px rgba(0, 0, 0, 0.15)',
            }),
          },
          elevation2: {
            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
            ...(darkMode && {
              boxShadow: '0 4px 16px rgba(0, 0, 0, 0.18)',
            }),
          },
          elevation3: {
            boxShadow: '0 6px 20px rgba(0, 0, 0, 0.1)',
            ...(darkMode && {
              boxShadow: '0 6px 20px rgba(0, 0, 0, 0.22)',
            }),
          },
        },
      },
      
      // AppBar Component
      MuiAppBar: {
        styleOverrides: {
          root: {
            backgroundColor: primaryColor,
            color: '#ffffff',
            boxShadow: '0 2px 10px rgba(0, 0, 0, 0.08)',
            marginTop: 0,
            ...(darkMode && {
              backgroundColor: '#1a1c2a',
              boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
            }),
          },
          colorDefault: {
            backgroundColor: primaryColor,
            color: '#ffffff',
            ...(darkMode && {
              backgroundColor: '#1a1c2a',
            }),
          },
        },
      },
      
      // Toolbar Component
      MuiToolbar: {
        styleOverrides: {
          root: {
            minHeight: '68px',
            padding: '0 24px',
          },
        },
      },
      
      // Drawer Component
      MuiDrawer: {
        styleOverrides: {
          paper: {
            backgroundColor: darkMode ? '#1d2033' : '#ffffff',
            boxShadow: darkMode ? '0 0 25px rgba(0, 0, 0, 0.25)' : '0 0 25px rgba(0, 0, 0, 0.15)',
            borderRight: 'none',
          },
        },
      },
      
      // Tabs for property listings
      MuiTabs: {
        styleOverrides: {
          root: {
            borderBottom: `1px solid ${alpha(primaryColor, 0.1)}`,
            ...(darkMode && {
              borderBottom: `1px solid ${alpha(primaryColor, 0.2)}`,
            }),
          },
          indicator: {
            backgroundColor: primaryColor,
            height: '3px',
            borderRadius: '3px 3px 0 0',
          },
        },
      },
      
      MuiTab: {
        styleOverrides: {
          root: {
            textTransform: 'none',
            fontWeight: 600,
            color: darkMode ? '#a0aec0' : '#718096',
            '&.Mui-selected': {
              color: darkMode ? '#ffffff' : primaryColor,
            },
          },
        },
      },
      
      // Card components for property listings
      MuiCard: {
        styleOverrides: {
          root: {
            borderRadius: '12px',
            overflow: 'hidden',
            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.06)',
            transition: 'transform 0.3s ease, box-shadow 0.3s ease',
            '&:hover': {
              transform: 'translateY(-4px)',
              boxShadow: '0 8px 24px rgba(0, 0, 0, 0.12)',
            },
            ...(darkMode && {
              backgroundColor: darkModeStyles.background.paper,
              boxShadow: '0 4px 16px rgba(0, 0, 0, 0.15)',
              '&:hover': {
                boxShadow: '0 8px 24px rgba(0, 0, 0, 0.25)',
              },
            }),
          },
        },
      },
      
      MuiCardHeader: {
        styleOverrides: {
          root: {
            padding: '16px 20px',
            ...(darkMode && {
              color: darkModeStyles.text.primary,
            }),
          },
          title: {
            fontWeight: 600,
          },
        },
      },
      
      MuiCardContent: {
        styleOverrides: {
          root: {
            padding: '16px 20px',
            ...(darkMode && {
              color: darkModeStyles.text.primary,
            }),
          },
        },
      },
      
      MuiCardActions: {
        styleOverrides: {
          root: {
            padding: '10px 20px 16px 20px',
          },
        },
      },
      
      // Badge for new listings
      MuiBadge: {
        styleOverrides: {
          badge: {
            height: '22px',
            minWidth: '22px',
            padding: '0 6px',
            fontSize: '0.75rem',
            fontWeight: 600,
          },
          colorPrimary: {
            backgroundColor: primaryColor,
          },
          colorSecondary: {
            backgroundColor: featuredPropertyColor,
            color: '#5c4500',
            ...(darkMode && {
              color: '#ffffff',
            }),
          },
        },
      },
    },
  });
};

export default getTheme;